<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container" ref="offsetHeight">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="店铺名称">
            <el-select v-model="form.store" filterable clearable placeholder="请选择店铺">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary" @click="query" style="margin-left: 20px">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row :gutter="10">
        <el-col :span="14">
          <panel-group :storeId="form.store" ref="childPanelGroup" />

          <div class="divBox">
            <el-card :bordered="false" dis-hover>
              <div slot="header">
                <div class="acea-row row-middle">
                  <el-avatar
                    icon="el-icon-s-operation"
                    size="small"
                    style="color: #1890ff; background: #e6f7ff; font-size: 13px"
                  />
                  <span class="ivu-pl-8">统计</span>
                </div>
              </div>
              <el-row :gutter="24">
                <el-col
                  :xl="10"
                  :lg="10"
                  :md="24"
                  :sm="24"
                  :xs="24"
                  class="ivu-mb mb10 dashboard-console-visit"
                >
                  <span class="ivu-pl-8">商品分析</span>
                  <order-count :storeId="form.store" ref="orderCountChild"></order-count>
                </el-col>
                <el-col
                  :xl="7"
                  :lg="7"
                  :md="24"
                  :sm="24"
                  :xs="24"
                  class="ivu-mb mb10 dashboard-console-visit"
                >
                  <span class="ivu-pl-8">本月成交额</span>

                  <bar-chart :storeId="form.store" ref="moneyChild"/>
                </el-col>
                <el-col
                  :xl="7"
                  :lg="7"
                  :md="24"
                  :sm="24"
                  :xs="24"
                  class="ivu-mb mb10 dashboard-console-visit"
                >
                  <span class="ivu-pl-8">本月订单数</span>

                  <pie-chart :storeId="form.store" ref="orderChild" />
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-col>
        <el-col :span="5">
          <el-table
            :data="moneyTableData"
            stripe
            style="width: 100%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"
            :height="tableHeight"
          >
            <el-table-column
              type="index"
              label="排名"
              width="55"
              align="center"
            >
              <template #default="{ $index }">
                <span v-if="$index === 0">
                  <svg t="1679989610433" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6553" width="32" height="30"><path d="M652.9 117.6v254.6l141.4-117.4V117.6H652.9zM228.7 254.8l141.4 117.4V117.6H228.8l-0.1 137.2z m202 167.7l60.6 50.5c11.1 10.9 28.9 10.9 40.1 0l60.6-50.5V117.6H430.3v304.9h0.4z m0 0" fill="#FA6D74" p-id="6554"></path><path d="M821 532.2c-43.6-29.3-65.4-81.8-55.2-133.4 8.5-55.7-15.1-79.1-70.7-70.7-51.6 10.1-104.2-11.8-133.5-55.4-33.4-45.2-66.7-45.2-100.1 0-29.3 43.6-81.9 65.4-133.4 55.3-55.6-8.5-79.2 15.1-70.7 70.7 10.2 51.5-11.6 104.1-55.2 133.3-45.2 33.3-45.2 66.8 0 100.1 43.6 29.3 65.4 81.8 55.2 133.3-8.5 55.7 15.1 79.1 70.7 70.7 51.5-10.1 104.1 11.7 133.4 55.3 33.4 45.2 66.7 45.2 100.1 0 29.3-43.6 81.9-65.3 133.4-55.3 55.6 8.5 79.1-15.1 70.7-70.7-10.2-51.5 11.6-104.1 55.2-133.4 45.4-33 45.4-66.3 0.1-99.8z m0 0" fill="#FDE51B" p-id="6555"></path><path d="M289.4 582.1c0 122.7 99.5 222.2 222.2 222.2s222.2-99.5 222.2-222.2-99.5-222.2-222.2-222.2-222.2 99.5-222.2 222.2z m0 0" fill="#FDBA36" p-id="6556"></path><path d="M565.4 703.3V460.9h-55.8l-51.8 45v59.6l51.8-44.9v182.8l55.8-0.1z m0 0" fill="#FFFFFF" p-id="6557"></path></svg>
                </span>
                <span v-else-if="$index === 1">
                  <svg t="1679989816685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6707" width="32" height="30"><path d="M644.9 107.6v254.6l141.4-117.4V107.6H644.9zM220.6 244.8L362 362.3V107.6H220.7l-0.1 137.2z m202 167.7l60.6 50.5c11.1 10.9 28.9 10.9 40.1 0l60.6-50.5V107.6H422.3v304.9h0.3z m0 0" fill="#F2816B" p-id="6708"></path><path d="M813 522.2c-43.6-29.3-65.4-81.8-55.2-133.4 8.5-55.7-15.1-79.1-70.7-70.7-51.6 10.1-104.2-11.8-133.5-55.4-33.4-45.2-66.7-45.2-100.1 0-29.3 43.6-81.9 65.4-133.4 55.3-55.6-8.5-79.2 15.1-70.7 70.7 10.2 51.5-11.6 104.1-55.2 133.3-45.2 33.3-45.2 66.8 0 100.1 43.6 29.3 65.4 81.8 55.2 133.3-8.5 55.7 15.1 79.1 70.7 70.7 51.5-10.1 104.1 11.7 133.4 55.3 33.4 45.2 66.7 45.2 100.1 0 29.3-43.6 81.9-65.3 133.4-55.3 55.6 8.5 79.1-15.1 70.7-70.7-10.2-51.5 11.6-104.1 55.2-133.4 45.4-33 45.4-66.3 0.1-99.8z m0 0" fill="#FC9E81" p-id="6709"></path><path d="M281.4 572.1c0 122.7 99.5 222.2 222.2 222.2s222.2-99.5 222.2-222.2-99.5-222.2-222.2-222.2-222.2 99.5-222.2 222.2z m0 0" fill="#FFB799" p-id="6710"></path><path d="M481.2 653.8h103.5v42.4H422.4v-18.1c0-12.7 2.3-24.3 7-34.8 4.7-10.5 11.1-20.3 19.3-29.4 8.2-9.1 20.9-19.7 38.1-31.9 15.8-11.8 26.8-22.2 33.1-31.3 6.3-9.1 9.5-18.7 9.5-28.9 0-22-12-32.9-35.9-32.9-21 0-41.1 8.4-60.2 25.2v-45.4c21.3-13.8 45.3-20.6 71.8-20.6 24.4 0 43.6 6.2 57.8 18.7 14.2 12.4 21.3 29.6 21.3 51.4 0 12.2-2 23.2-6.1 33s-10 19-17.8 27.7c-7.8 8.6-20.2 19-37.3 31-16.5 11.8-27.6 20.9-33.2 27.3-5.8 6.3-8.6 11.9-8.6 16.6z" fill="#FFFFFF" p-id="6711"></path></svg>
                </span>
                <span v-else-if="$index === 2">
                  <svg t="1679989848393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6861" width="32" height="30"><path d="M652.9 131.5v254.6l141.4-117.4V131.5H652.9zM228.7 268.6L370.1 386V131.5H228.8l-0.1 137.1z m202 167.8l60.6 50.5c11.1 10.9 28.9 10.9 40.1 0l60.6-50.5V131.5H430.3v304.9h0.4z m0 0" fill="#B2C9DA" p-id="6862"></path><path d="M821 546.1c-43.6-29.3-65.4-81.8-55.2-133.4 8.5-55.7-15.1-79.1-70.7-70.7-51.6 10.1-104.2-11.8-133.5-55.4-33.4-45.2-66.7-45.2-100.1 0-29.3 43.6-81.9 65.4-133.4 55.3-55.6-8.5-79.2 15.1-70.7 70.7 10.2 51.5-11.6 104.1-55.2 133.3-45.2 33.3-45.2 66.8 0 100.1 43.6 29.3 65.4 81.8 55.2 133.3-8.5 55.7 15.1 79.1 70.7 70.7 51.5-10.1 104.1 11.7 133.4 55.3 33.4 45.2 66.7 45.2 100.1 0C591 861.7 643.5 840 695.1 850c55.6 8.5 79.1-15.1 70.7-70.7-10.2-51.5 11.6-104.1 55.2-133.4 45.3-33.1 45.3-66.4 0-99.8z m0 0" fill="#D8E3EB" p-id="6863"></path><path d="M289.4 595.9c0 122.7 99.5 222.2 222.2 222.2s222.2-99.5 222.2-222.2-99.5-222.2-222.2-222.2-222.2 99.5-222.2 222.2z m0 0" fill="#B2C9DA" p-id="6864"></path><path d="M436.9 658.3c16.3 12.2 35.3 18.3 57 18.3 13.8 0 24.7-3 32.8-9.1 8.1-6.1 12.1-14.8 12.1-26 0-11.6-4.8-20.4-14.4-26.5-9.6-6.1-23.1-9.1-40.4-9.1h-21.7v-39.2h20c32.8 0 49.2-11 49.2-33.1 0-20.8-12.6-31.2-37.7-31.2-16.4 0-32.3 5.4-47.7 16.1v-42.1c16.8-8.7 36.6-13.1 59.4-13.1 23.1 0 41.9 5.3 56.2 16 14.4 10.7 21.6 25.4 21.6 44.4 0 31.9-16.2 52-48.5 60.2v0.8c17 1.9 30.6 8.1 40.8 18.7 10.2 10.6 15.3 23.4 15.3 38.5 0 23.2-8.5 41.3-25.4 54.4-17 13-39.6 19.5-67.8 19.5-25.1 0-45.3-4.2-60.7-12.4v-45.1z" fill="#FFFFFF" p-id="6865"></path></svg>
                </span>
                <span v-else>{{ $index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="time"
              label="店铺"
              show-overflow-tooltip
              >
            </el-table-column>
            <el-table-column
              prop="num"
              label="收益"
              align="right"
              >
              <template #default="{ row }">
                <span style="font-size: 18px; font-weight: 700; color: #ff4949">￥{{ row.num }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="5">
          <el-table
            :data="orderTableData"
            stripe
            style="width: 100%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"
            :height="tableHeight"
          >
            <el-table-column
              type="index"
              label="排名"
              width="55"
              align="center"
            >
              <template #default="{ $index }">
                <span v-if="$index === 0">
                  <svg t="1679989610433" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6553" width="32" height="30"><path d="M652.9 117.6v254.6l141.4-117.4V117.6H652.9zM228.7 254.8l141.4 117.4V117.6H228.8l-0.1 137.2z m202 167.7l60.6 50.5c11.1 10.9 28.9 10.9 40.1 0l60.6-50.5V117.6H430.3v304.9h0.4z m0 0" fill="#FA6D74" p-id="6554"></path><path d="M821 532.2c-43.6-29.3-65.4-81.8-55.2-133.4 8.5-55.7-15.1-79.1-70.7-70.7-51.6 10.1-104.2-11.8-133.5-55.4-33.4-45.2-66.7-45.2-100.1 0-29.3 43.6-81.9 65.4-133.4 55.3-55.6-8.5-79.2 15.1-70.7 70.7 10.2 51.5-11.6 104.1-55.2 133.3-45.2 33.3-45.2 66.8 0 100.1 43.6 29.3 65.4 81.8 55.2 133.3-8.5 55.7 15.1 79.1 70.7 70.7 51.5-10.1 104.1 11.7 133.4 55.3 33.4 45.2 66.7 45.2 100.1 0 29.3-43.6 81.9-65.3 133.4-55.3 55.6 8.5 79.1-15.1 70.7-70.7-10.2-51.5 11.6-104.1 55.2-133.4 45.4-33 45.4-66.3 0.1-99.8z m0 0" fill="#FDE51B" p-id="6555"></path><path d="M289.4 582.1c0 122.7 99.5 222.2 222.2 222.2s222.2-99.5 222.2-222.2-99.5-222.2-222.2-222.2-222.2 99.5-222.2 222.2z m0 0" fill="#FDBA36" p-id="6556"></path><path d="M565.4 703.3V460.9h-55.8l-51.8 45v59.6l51.8-44.9v182.8l55.8-0.1z m0 0" fill="#FFFFFF" p-id="6557"></path></svg>
                </span>
                <span v-else-if="$index === 1">
                  <svg t="1679989816685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6707" width="32" height="30"><path d="M644.9 107.6v254.6l141.4-117.4V107.6H644.9zM220.6 244.8L362 362.3V107.6H220.7l-0.1 137.2z m202 167.7l60.6 50.5c11.1 10.9 28.9 10.9 40.1 0l60.6-50.5V107.6H422.3v304.9h0.3z m0 0" fill="#F2816B" p-id="6708"></path><path d="M813 522.2c-43.6-29.3-65.4-81.8-55.2-133.4 8.5-55.7-15.1-79.1-70.7-70.7-51.6 10.1-104.2-11.8-133.5-55.4-33.4-45.2-66.7-45.2-100.1 0-29.3 43.6-81.9 65.4-133.4 55.3-55.6-8.5-79.2 15.1-70.7 70.7 10.2 51.5-11.6 104.1-55.2 133.3-45.2 33.3-45.2 66.8 0 100.1 43.6 29.3 65.4 81.8 55.2 133.3-8.5 55.7 15.1 79.1 70.7 70.7 51.5-10.1 104.1 11.7 133.4 55.3 33.4 45.2 66.7 45.2 100.1 0 29.3-43.6 81.9-65.3 133.4-55.3 55.6 8.5 79.1-15.1 70.7-70.7-10.2-51.5 11.6-104.1 55.2-133.4 45.4-33 45.4-66.3 0.1-99.8z m0 0" fill="#FC9E81" p-id="6709"></path><path d="M281.4 572.1c0 122.7 99.5 222.2 222.2 222.2s222.2-99.5 222.2-222.2-99.5-222.2-222.2-222.2-222.2 99.5-222.2 222.2z m0 0" fill="#FFB799" p-id="6710"></path><path d="M481.2 653.8h103.5v42.4H422.4v-18.1c0-12.7 2.3-24.3 7-34.8 4.7-10.5 11.1-20.3 19.3-29.4 8.2-9.1 20.9-19.7 38.1-31.9 15.8-11.8 26.8-22.2 33.1-31.3 6.3-9.1 9.5-18.7 9.5-28.9 0-22-12-32.9-35.9-32.9-21 0-41.1 8.4-60.2 25.2v-45.4c21.3-13.8 45.3-20.6 71.8-20.6 24.4 0 43.6 6.2 57.8 18.7 14.2 12.4 21.3 29.6 21.3 51.4 0 12.2-2 23.2-6.1 33s-10 19-17.8 27.7c-7.8 8.6-20.2 19-37.3 31-16.5 11.8-27.6 20.9-33.2 27.3-5.8 6.3-8.6 11.9-8.6 16.6z" fill="#FFFFFF" p-id="6711"></path></svg>
                </span>
                <span v-else-if="$index === 2">
                  <svg t="1679989848393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6861" width="32" height="30"><path d="M652.9 131.5v254.6l141.4-117.4V131.5H652.9zM228.7 268.6L370.1 386V131.5H228.8l-0.1 137.1z m202 167.8l60.6 50.5c11.1 10.9 28.9 10.9 40.1 0l60.6-50.5V131.5H430.3v304.9h0.4z m0 0" fill="#B2C9DA" p-id="6862"></path><path d="M821 546.1c-43.6-29.3-65.4-81.8-55.2-133.4 8.5-55.7-15.1-79.1-70.7-70.7-51.6 10.1-104.2-11.8-133.5-55.4-33.4-45.2-66.7-45.2-100.1 0-29.3 43.6-81.9 65.4-133.4 55.3-55.6-8.5-79.2 15.1-70.7 70.7 10.2 51.5-11.6 104.1-55.2 133.3-45.2 33.3-45.2 66.8 0 100.1 43.6 29.3 65.4 81.8 55.2 133.3-8.5 55.7 15.1 79.1 70.7 70.7 51.5-10.1 104.1 11.7 133.4 55.3 33.4 45.2 66.7 45.2 100.1 0C591 861.7 643.5 840 695.1 850c55.6 8.5 79.1-15.1 70.7-70.7-10.2-51.5 11.6-104.1 55.2-133.4 45.3-33.1 45.3-66.4 0-99.8z m0 0" fill="#D8E3EB" p-id="6863"></path><path d="M289.4 595.9c0 122.7 99.5 222.2 222.2 222.2s222.2-99.5 222.2-222.2-99.5-222.2-222.2-222.2-222.2 99.5-222.2 222.2z m0 0" fill="#B2C9DA" p-id="6864"></path><path d="M436.9 658.3c16.3 12.2 35.3 18.3 57 18.3 13.8 0 24.7-3 32.8-9.1 8.1-6.1 12.1-14.8 12.1-26 0-11.6-4.8-20.4-14.4-26.5-9.6-6.1-23.1-9.1-40.4-9.1h-21.7v-39.2h20c32.8 0 49.2-11 49.2-33.1 0-20.8-12.6-31.2-37.7-31.2-16.4 0-32.3 5.4-47.7 16.1v-42.1c16.8-8.7 36.6-13.1 59.4-13.1 23.1 0 41.9 5.3 56.2 16 14.4 10.7 21.6 25.4 21.6 44.4 0 31.9-16.2 52-48.5 60.2v0.8c17 1.9 30.6 8.1 40.8 18.7 10.2 10.6 15.3 23.4 15.3 38.5 0 23.2-8.5 41.3-25.4 54.4-17 13-39.6 19.5-67.8 19.5-25.1 0-45.3-4.2-60.7-12.4v-45.1z" fill="#FFFFFF" p-id="6865"></path></svg>
                </span>
                <span v-else>{{ $index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="time"
              label="店铺"
              >
            </el-table-column>
            <el-table-column
              prop="num"
              label="订单数"
              width="100"
              align="right"
            >
              <template #default="{ row }">
                <span style="font-size: 16px; font-weight: 700; color: #0000cc">{{ row.num }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PanelGroup from "./dashboard-shop/PanelGroup";
import PieChart from "./dashboard-shop/BarChartT";
import BarChart from "./dashboard-shop/BarChart";
import { rankByStoreMoney, rankByStoreOrder, store_list } from "@/api/visits";
import OrderCount from "./dashboard-shop/OrderCount";

export default {
  name: "Dashboard",
  components: {
    PanelGroup,
    PieChart,
    BarChart,
    OrderCount,
  },
  computed: {
    ...mapGetters(["roles"]),
  },
  data() {
    return {
      form: {
      },
      options: [],
      moneyTableData: [],
      orderTableData: [],
      tableHeight: '100%',
    }
  },
  created() {
    this.rankByStoreMoney()
    this.rankByStoreOrder()
    this.storeList()
  },
  mounted() {
    this.fetTableHeight()
  },
  methods: {
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableHeight = 0
        resolve()
      })
    },
    // 设置table高度
    fetTableHeight() {
      this.resetHeight().then(res => {
        this.tableHeight = this.$refs.offsetHeight.offsetHeight - 56 - 40
      })
    },
    storeList() {
      store_list().then(res => {
        this.options = res.list
      })
    },
    query() {
      this.$refs.childPanelGroup.initData()
      this.$refs.orderCountChild.getOrderCount()
      this.$refs.moneyChild.initChart()
      this.$refs.orderChild.initChart()
    },
    rankByStoreMoney() {
      rankByStoreMoney().then(res => {
        this.moneyTableData = res.money
      })
    },
    rankByStoreOrder() {
      rankByStoreOrder().then(res => {
        this.orderTableData = res.order
      })
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.acea-row {
  ::v-deep.el-avatar--small {
    width: 22px;
    height: 22px;
    line-height: 22px;
  }
}
.checkTime {
  ::v-deep.el-radio__input {
    display: none;
  }
}
.ivu-pl-8 {
  margin-left: 8px;
  font-size: 14px;
}
.divBox {
  // padding: 0 20px !important;
}
.dashboard-console-visit {
  ::v-deep.el-card__header {
    padding: 14px 20px !important;
  }
  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}
.ivu-mb {
  margin-bottom: 10px;
}
</style>
